<template>
	<view class="container">
		<view class="header">
			<view class="title">培养联系人</view>
			<view class="subtitle">您的培养联系人信息</view>
		</view>
		
		<view class="contact-list">
			<view v-if="loading" class="loading">
				<uni-load-more status="loading" />
			</view>
			<view v-else-if="contacts.length === 0" class="empty">
				<text>暂无培养联系人信息</text>
			</view>
			<view v-else v-for="(contact, index) in contacts" :key="index" class="contact-card">
				<view class="contact-header">
					<view class="avatar-container">
						<image class="avatar" :src="contact.avatarUrl || '/static/images/default-avatar.png'" mode="aspectFill"></image>
						<view class="gender-badge" :class="contact.gender === '男' ? 'male' : 'female'">
							{{contact.gender}}
						</view>
					</view>
					<view class="basic-info">
						<view class="name-age">
							<text class="name">{{contact.name}}</text>
							<text class="age">{{contact.age}}岁</text>
						</view>
						<view class="role">{{contact.politicalStatus}}</view>
					</view>
				</view>
				
				<view class="contact-info">
					<view class="info-item">
						<text class="label">联系电话：</text>
						<text class="value">{{contact.phone}}</text>
					</view>
					<view class="info-item">
						<text class="label">电子邮箱：</text>
						<text class="value">{{contact.email}}</text>
					</view>
					<view class="info-item">
						<text class="label">所属部门：</text>
						<text class="value">{{contact.dept}}</text>
					</view>
				</view>
				
				<view class="contact-actions">
					<button class="contact-btn" @click="showContactInfo(contact)">联系培养联系人</button>
				</view>
			</view>
		</view>
		
		<!-- 联系方式弹窗 -->
		<uni-popup ref="contactPopup" type="center">
			<view class="popup-content">
				<view class="popup-title">联系方式</view>
				<view class="popup-info">
					<view class="info-row">
						<text class="label">姓名：</text>
						<text class="value">{{selectedContact.name}}</text>
					</view>
					<view class="info-row">
						<text class="label">电话：</text>
						<text class="value">{{selectedContact.phone}}</text>
					</view>
					<view class="info-row">
						<text class="label">邮箱：</text>
						<text class="value">{{selectedContact.email}}</text>
					</view>
				</view>
				<button class="close-btn" @click="closeContactPopup">关闭</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { get } from '@/common/js/request';

const loading = ref(true);
const contacts = ref([]);
const selectedContact = ref({});
const contactPopup = ref(null);

// 获取培养联系人列表
const getContacts = async () => {
	try {
		loading.value = true;
		const userId = uni.getStorageSync('userId');
		console.log(userId);
		
		if (!userId) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			});
			return;
		}
		
		const res = await get('/contactUser/contactIds/' + userId);
		
		// 获取到联系人ID列表后，获取每个联系人的详细信息
		const contactIds = res.data;
		
		console.log(contactIds);
		const contactDetails = await Promise.all(
			contactIds.map(async (id) => {
				console.log(id);
				const detailRes = await get('/user/userInfo?id=' + id);
				console.log(detailRes);
				return detailRes.data.user;
			})
		);
		contacts.value = contactDetails;
	} catch (error) {
		console.error('获取培养联系人失败:', error);
		uni.showToast({
			title: '获取培养联系人失败',
			icon: 'none'
		});
	} finally {
		loading.value = false;
	}
};

// 显示联系方式弹窗
const showContactInfo = (contact) => {
	selectedContact.value = contact;
	contactPopup.value.open();
};

// 关闭联系方式弹窗
const closeContactPopup = () => {
	contactPopup.value.close();
};

onMounted(() => {
	getContacts();
});
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding: 20rpx;
	}
	
	.header {
		padding: 30rpx 20rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
			display: block;
		}
		
		.subtitle {
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.contact-list {
		padding: 20rpx 0;
	}
	
	.contact-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.contact-header {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.avatar-container {
				position: relative;
				margin-right: 20rpx;
				
				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
					border: 4rpx solid #f0f0f0;
				}
				
				.gender-badge {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid #fff;
					
					&.male {
						background-color: #4a89dc;
					}
					
					&.female {
						background-color: #ed5565;
					}
					
					image {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
			
			.basic-info {
				flex: 1;
				
				.name-age {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;
					
					.name {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-right: 16rpx;
					}
					
					.age {
						font-size: 24rpx;
						color: #666;
						background-color: #f5f5f5;
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
					}
				}
				
				.role {
					font-size: 26rpx;
					color: #666;
				}
			}
		}
		
		.contact-info {
			border-top: 2rpx solid #f5f5f5;
			padding-top: 20rpx;
			margin-bottom: 20rpx;
			
			.info-item {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.label {
					font-size: 28rpx;
					color: #666;
					margin-right: 16rpx;
				}
				
				.value {
					font-size: 28rpx;
					color: #666;
				}
			}
		}
		
		.contact-actions {
			border-top: 2rpx solid #f5f5f5;
			padding-top: 20rpx;
			display: flex;
			justify-content: flex-end;
			
			.contact-btn {
				display: flex;
				align-items: center;
				background-color: #1890ff;
				color: #fff;
				padding: 12rpx 24rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				
				.btn-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
	
	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
	}
	
	.empty {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
	}
	
	.popup-content {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		width: 80%;
		max-width: 600rpx;
		
		.popup-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.popup-info {
			margin-bottom: 20rpx;
			
			.info-row {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.label {
					font-size: 28rpx;
					color: #666;
					margin-right: 16rpx;
				}
				
				.value {
					font-size: 28rpx;
					color: #666;
				}
			}
		}
		
		.close-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #1890ff;
			color: #fff;
			padding: 12rpx 24rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
		}
	}
</style> 